<!DOCTYPE html>
<html>

	<head>
		<title>business-details</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../lib/weui.min.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/business-details.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<style type="text/css">
.load2 {
	position: absolute;
	width: 200px;
	height: 160px;
	background: url('') no-repeat;
	margin-left: -96px;
	margin-top: -100px;
	left: 50%;
	top: 70%;
	-webkit-animation: small .8s infinite;
	-moz-animation: small .8s infinite;
	-o-animation: small .8s infinite;
	animation: small .8s infinite;
	background-position: center;
}

@keyframes small {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(.4);
		-moz-transform: scale(.4);
		-ms-transform: scale(.4);
		-o-transform: scale(.4);
		transform: scale(.4);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

.load {
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(img/922445-20170312171729982-1524461368.png);
	height: 100px;
	width: 100px;
	margin-left: -50px;
	margin-top: -50px;
	-webkit-animation: test 4.5s steps(6) infinite, updown .8s infinite;
	-moz-animation: test 4.5s steps(6) infinite, updown .8s infinite;
	-o-animation: test 4.5s steps(6) infinite, updown .8s infinite;
	animation: test 4.5s steps(6) infinite, updown .8s infinite;
}

@keyframes test {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 600px;
	}
}

@keyframes updown {
	0% {
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
	50% {
		-webkit-transform: translateY(-50px);
		-ms-transform: translateY(-50px);
		-o-transform: translateY(-50px);
		transform: translateY(-50px);
		
	}
	100% {
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
}
			.icon-mayue{
				font-size: 20px;
				margin-left: 10px;
				font-weight: bold;
			}
			.mayue-you{
				font-weight: bold;
				margin-right: 10px;
				
				
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="weui-tab">
			
			<div class="weui-tab__bd">
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<div id="content">
						<!--内容-->
						<div id="wu_zhifu">    
							<p class="h20"><span class="iconfont icon-back icon-mayue" @click="wupengfanhui"></span><span @click="wu_list()"  id="mayue-product" class="fr">商家详情&nbsp;<span class="iconfont icon-more mayue-you"></span></span></p>
							<p style="margin-top: 20px;"><img style="width: 90px; height: 90px; margin-left: 10px; margin-right: 10px;" id="wu-img" :src="products" /></p>
							<div>
								<p v-html="name">...</p>
								<p>商家配送|平均49分钟|配送费￥2.5元<span id="mayue-product" class="fr" @click="wu_list()"><span class="iconfont icon-more mayue-you"></span></span> </p>
								<p class="wu_p" style="font-size: 12px;">公告：【格林先生的热狗店】都能看到那LOD基督教家</p>
							</div>
							<p class="h20">&nbsp;</p>
						</div>
						<!--2个选项卡-->
						<div id="tab" class="j_tab">
							<ol class="ul">
								<li class="active">商品</li>
								<li>评价<span style="color: orangered;">（4.0分）</span></li>
							</ol>
						</div>
						<p class="cb" style="clear: both;"></p>
						<div class="div" style="display: block;">
							<div class="wu_fl">
								<!--商家信息-->
								<div class="weui-panel weui-panel_access">
									<div class="weui-panel__bd" v-for="item in products1">
										<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
											<div class="weui-media-box__hd">
												<img class="weui-media-box__thumb" :src="item.attributes.img">
											</div>
											<div class="weui-media-box__bd">
												<h4 class="weui-media-box__title" v-html="item.attributes.name"></h4>
												<p>
													<span>评分</span> 
													<span v-html="item.attributes.score"></span>
													<span>销量</span>
													<span v-html="item.attributes.volume"></span>
												</p>
												<p>
													<span>￥</span><span class="mayuejiage" v-html="item.attributes.price"></span><span>元</span>
													<span class="box wu_add fr" @click="fly($event,item)"><img class="inf1" src="img/timg.jpg"/></span>
												</p>
											</div>
										</a>
									</div>
								</div>

							</div>
						</div>
						<div class="div" style="display: none; text-align: center;">
							<div style="margin-top: 350px;">
								<div class="load"></div>
								<div class="load2"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="mayue-gouwuche">
				<!--//这是空空的购物车的那页-->
			<div id="kongde" v-if="haolist.length<=0&&type">
					您的购物车空空如也,快去选购吧
				</div>
				<!--//这是购物车的内容的显示的div-->
				<div id="hao-gouwuche" v-if="haolist.length>0&&type">
					<p id="yixuanshopping"><span id="yixuan">已选商品</span> <span id="clear" @click="clear">清空</span></p>
					<div class="yixuanshangpin">
						<!--//这是商品的模板-->
						<div class="mayue1" v-for="hao in haolist">
							<div class="mayue1-1" v-html="hao.attributes.cartname"></div>
							<div class="mayue1-2">
								<div class="mayue1-2-1" v-html="hao.attributes.cartprice*hao.attributes.cartnum"></div>
								<div class="mayue1-2-2">
									<span class="mayue2-1" @click="reduce($index)">-</span>
									<span class="mayue2-2" v-html="hao.attributes.cartnum"></span>
									<span class="mayue2-3" @click="add($index)">+</span>
								</div>
							</div>
						</div>
						<!--//这是未登录的情况下商品展示的div-->
						<div class="mayue2" v-for="hao1 in listnum">
							<div class="mayue1-1" v-html="hao1.name"></div>
							<div class="mayue1-2">
								<div class="mayue1-2-1" v-html="hao1.price"></div>
								<div class="mayue1-2-2">
									<span class="mayue2-1" @click="reduce($index)">-</span>
									<span class="mayue2-2" v-html="hao1.num"></span>
									<span class="mayue2-3" @click="add($index)">+</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="weui-tabbar shouzhi" style="position:relative; height:50px; background-color: black;">
					<div class="wu_sell" id="hao-dianjixianshi" @click="type=!type">
						<div class="cartBox">
							<div class="cart">
								<i id="end"></i>
								<span id="mayue-shuliang" v-html="mayuenum"></span>
							</div>
						</div>
						<img src="img/2017-03-30_200330.png" />
					</div>
					<div id="mayue-zongjia">
						<p style="color: white; font-weight: bold;">￥<span id="wupeng-zongjia" v-html="mayuezongjia"></span></p>
						<p style="color: white; font-size: 12px;">另需配送费￥<span>10</span>元</p>
					</div>
					<input type="button" class="qujiesuan" value="去结算" @click="haodianji" v-if="mayuezongjia>30">
					<input type="button" id="qujiesuanjinyong" disabled="disabled" value="去结算" v-else>
				</div>
			</div>
		</div>
		<script src="../lib/jquery-2.1.4.js"></script>
		<script src="../js/jquery-weui.min.js"></script>
		<script src="../column/js/zujian.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.fly.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript"></script>
		<!--<script src="js/business-details.js" type="text/javascript"></script>-->
		<script type="text/javascript">
			var vue = new Vue({
				el: "body",
				data: {
					products: "",
					name: "",
					products1: "",
					haolist: "",
					mayuezongjia: 0,
					mayuenum: 0,
					type: false,
					listnum: [],
				},
				//创建成功后执行的函数
				created: function() {
					var APP_ID = '9etyUbhi95RBWTaoLBTyW5HP-gzGzoHsz';
					var APP_KEY = '6IkehXVEvUELlpo1SAf1c8PR';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});
					var mthis = this;
					var query = new AV.Query('Business');
					query.find().then(function(products) {
						for(var i = 0; i < products.length; i++) {
							if(mthis.geturl() == products[i].id) {
								mthis.products = products[i].attributes.img[0];
								mthis.name = products[i].attributes.name;
							}
						}
						// 查询到商品后，在前端展示到相应的位置中。
					}).catch(function(error) {
						console.log(JSON.stringify(123));
					});
					var query1 = new AV.Query('Commodity');
					query1.limit(parseInt(Math.random() * 10 + 5)); // 最多返回 10 条结果
					query1.skip(parseInt(Math.random() * 100)); // 跳过 20 条结果
					query1.find().then(function(products) {
						mthis.products1 = products;
						// 查询到商品后，在前端展示到相应的位置中。
					}).catch(function(error) {
						console.log("错误");
					});
					mthis.diaoyong();
					//存到localstroge中后读出来
//					for(var i = 0; i < window.localStorage.length; i++) {
//						var j = new Object();
//						j.name = window.localStorage.key(i);
//						j.num = window.localStorage.getItem(j.name);
//						j.price = window.localStorage.getItem(j.name)
//						this.listnum.push(j);
//					};
				},
				methods: {
					//封装好的解析传过来的url
					geturl: function() {
						url = location.search;
						c_start = url.indexOf(name + "=");
						if(c_start != -1) {
							c_start = c_start + name.length + 1
							c_end = url.indexOf("&", c_start);
							if(c_end == -1) c_end = url.length;
							return unescape(url.substring(c_start, c_end));
						}
						return "";
					},
					wu_list: function() {
						location.href = "../Merchant-details/Merchant-details.html?index=" + this.geturl();
					},
					//飞入购物车的效果
					feiru: function() {
						var offset = $('#end').offset(),
							flyer = $(".inf1").clone();
						flyer.css({
							"width": "2rem",
							"border-radius": "2rem"
						});
						flyer.fly({
							start: {
								left: event.pageX,
								top: event.screenY - 80
							},
							end: {
								left: offset.left,
								top: offset.top,
								width: 0,
								height: 0,
							},
							onEnd: function() {
								flyer.remove();
							}
						});
					},
					//点击加入购物车的按钮执行的操作
					fly: function(event, item) {
						vue.feiru();
						var currentUser = AV.User.current();
						//判断用户是否登录
						if(currentUser) {
							//若登录则点击时直接将商品存到云端
							console.log("该用户已登录");
							//点击加入购物车时要执行的操作
							var currentUser = AV.User.current().attributes.username;
							var query = new AV.Query('shopping');
							//按照时间顺序排序
							query.descending('createdAt');
							query.contains('cartname', item.attributes.name);
							query.find().then(function(products) {
								//购物车表有没有，没有创建，有更新
								if(products == "") {
									var Product = AV.Object.extend('shopping');
									var product = new Product();
									//设置商品名称
									product.set('cartname', item.attributes.name);
									//设置商品价格
									product.set('cartprice', item.attributes.price);
									//设置商品数量
									var cartnum = "1";
									product.set('cartnum', cartnum);
									product.set('owner', currentUser);
									product.save().then(function() {
										console.log("发布成功");
										vue.diaoyong();
									}, function(error) {
										console.log("添加失败");
									});
								} else {
									console.log(products[0].attributes.cartnum);
									var cartnum = "1";
									var newcartnum = (cartnum * 1 + (products[0].attributes.cartnum) * 1);
									var todo = AV.Object.createWithoutData('shopping', '' + products[0].id + '');
									// 修改属性
									todo.set('cartnum', '' + newcartnum + '');
									// 保存到云端
									todo.save().then(function() {
										//  发布成功
										console.log("改数成功了");
										vue.diaoyong();
										//bug用户名必须为英文！！！否则url不转义会出错
										//location.href = "cart.html?User=" + zhuanyi(currentUser);
									}, function(error) {
										console.log("添加失败");
									});
								}
								vue.diaoyong();
							}, function(error) {
								console.log("失败");
							});
						} else {
							//若没有就跳到登录注册页面/如果没有登录就将商品存储到本地存储中
							console.log("该用户没有登录");
							location.href = "../login/index.html";
//							var j = new Object();
//							j.name = item.attributes.name;
//							j.price = item.attributes.price;
//							var cartnum = "1";
//							j.num = cartnum;
//							vue.listnum.push(j);
//							window.localStorage.setItem(item.attributes.name, [item.attributes.price, cartnum]);
//                          
						}
					},
					//写一个公共的方法，可以在任何地方调用
					diaoyong: function() {
						var query12 = new AV.Query("shopping");
						query12.find().then(function(product) {
							vue.haolist = product;
							var zongjian = 0;
							var wupengnum = 0;
							for(var i = 0; i < product.length; i++) {
								zongjian += parseFloat(product[i].attributes.cartprice) * parseInt(product[i].attributes.cartnum);
								wupengnum += parseInt(product[i].attributes.cartnum);
							}
							vue.mayuezongjia = zongjian.toFixed(2);
							vue.mayuenum = wupengnum;
						})
					},
					//清空数据库的函数
					clear: function() {
						var query12 = new AV.Query("shopping");
						query12.find().then(function(product) {
							for(var i = 0; i < product.length; i++) {
								var todo = AV.Object.createWithoutData('shopping', product[i].id);
								todo.destroy().then(function(success) {
									console.log("删除成功");
                                    
									vue.diaoyong();
								}, function(error) {
									console.log("删除失败");
								});
							}
						});
					},
					//点击减号的时候的函数
					reduce: function(t) {
						var query12 = new AV.Query("shopping");
						query12.find().then(function(product) {
							console.log(product[t]);
							if(product[t].attributes.cartnum > 1) {
								var cartnum = "1";
								//如果云端有了该商品，就让数量加
								var newcartnum = ((product[t].attributes.cartnum) * 1 - cartnum * 1);
								var todo = AV.Object.createWithoutData('shopping', '' + product[t].id + '');
								// 修改属性
								todo.set('cartnum', '' + newcartnum + '');
								// 保存到云端
								todo.save().then(function() {
									console.log("改数成功了");
									vue.diaoyong();
								}, function(error) {
									console.log("添加失败");
								});
							} else {
								var todo = AV.Object.createWithoutData('shopping', product[t].id);
								todo.destroy().then(function(success) {
									console.log("删除成功");
									vue.diaoyong();
								}, function(error) {
									console.log("删除失败");
								});
							}
						})
					},
					//点击加号的含函数
					add: function(t) {
						var query12 = new AV.Query("shopping");
						query12.find().then(function(product) {
							console.log(product[t]);
							var cartnum = "1";
							var newcartnum = ((product[t].attributes.cartnum) * 1 + cartnum * 1);
							var todo = AV.Object.createWithoutData('shopping', '' + product[t].id + '');
							// 修改属性
							todo.set('cartnum', '' + newcartnum + '');
							// 保存到云端
							todo.save().then(function() {
								//  发布成功
								console.log("改数成功了");
								vue.diaoyong();
							}, function(error) {
								console.log("添加失败");
							});
						})
					},
					//点击去结算时候的操作
					haodianji: function() {
						var currentUser = AV.User.current();
						//判断用户是否登录
						if(currentUser) {
							//若登录跳到商家订单页面
							console.log("该用户已登录");
							location.href = "../firm-order/firm-order.html"
						} else {
							//若没有就跳到登录注册页面
							console.log("该用户没有登录");
							location.href = "../login/index.html"
						}
					},
					wupengfanhui:function  () {
					history.go(-1);
					}
				},
			});
		</script>
	</body>

</html>